<template>
  <div class="form-input-area" style="position: relative">
    <Spin :withIcon="true" v-if="loading"></Spin>
    <div
      class="pub-m-l-90 f-14 c-o f-w-600"
      style="cursor: pointer"
      @click="showSelectDomain"
    >
      从我的域名列表选择域名
    </div>
    <div class="flx-row-s-s div-line" style="margin-top: 20px">
      <div class="long-name">过户域名</div>
      <div style="width: 600px; position: relative">
        <Input
          v-model="dnText"
          wrap="hard"
          type="textarea"
          :autosize="{ minRows: 10, maxRows: 10 }"
          @on-blur="domainBlur(true)"
          :placeholder="'每行1个域名，可按Enter键进行换行，最多' + maxDnNumber + '个域名'"
        />
        <span class="c-g number-tips">{{ curDnNumber }}/ {{maxDnNumber}}</span>
      </div>
    </div>
    <div class="flx-row-s-c div-line">
      <div class="long-name">选择模板</div>
      <span
        class="c-d2 f-w-600 f-14"
        v-if="selectTemplateName"
        style="margin-right: 15px"
        >{{ selectTemplateName }}</span
      >
      <div
        class="b-user-strong-button small-code-button"
        @click="templateSelectModalShow = true"
      >
        点击选择
      </div>
    </div>
    <div class="flx-row-s-c div-line">
      <div class="long-name">转移锁定</div>
      <RadioGroup v-model="rule">
        <Radio class="radio-mg-r-20" :label="0">不设置</Radio>
        <Radio class="radio-mg-r-20" :label="1">设置</Radio>
      </RadioGroup>
      <span class="c-r f-14"
        >(域名若设置转移锁定，60内无法转出或交易)</span
      >
    </div>
    <div
      class="user-strong-button submit-button-style pub-m-l-90"
      @click="submit"
    >
      确认
    </div>
    <template-push-result-modal
      title="模板过户结果"
      :show.sync="resultModalShow"
      :sucList="resultList"
    ></template-push-result-modal>
    <template-select-modal
        :show.sync="templateSelectModalShow"
        :tSelect="templateSelect"
        @check-submit="selectTemplateSubmit"
    ></template-select-modal>

    <domain-select-modal
        :show.sync="domainSelectModalShow"
        @selectDomainConfirmEvent="selectDomainConfirmEvent"
        @cancelDomainConfirmEvent="cancelDomainConfirmEvent"
    />
  </div>
</template>

<script>
import { parseDomain } from "@/utils/formatDomain";
import { getTemplateList, templatePush } from "@/api/user";
import DomainSelectModal from "_c/modal/domainSelectModal/domainSelectModal.vue";
export default {
  name: "VipTemplateTransfer",
  components: {
    templatePushResultModal: () =>
      import("_c/modal/templatePushResultModal/templatePushResultModal.vue"),
    templateSelectModal: () =>
      import("_c/modal/templateSelectModal/templateSelectModal.vue"),
    DomainSelectModal
  },
  data() {
    return {
      dmName: false,
      loading: false,
      myTemplateList: [],

      // 表单数据
      dnText: "",
      curDnNumber: 0,
      maxDnNumber: 200,

      templateSelect: null,
      selectTemplateName: "",
      templateSelectModalShow: false,
      rule: 0,

      // 结果数据
      resultModalShow: false,
      resultList: [],
      // 选中域名数据
      selectList: [],
      domainSelectModalShow: false
    };
  },
  created() {
    this.getTemplateList();
    let dnList = this.$route.params.dnList;
    if (dnList && dnList.length > 0) {
      this.dnText = dnList.join("\n");
    }
  },
  methods: {
    selectDomainConfirmEvent(domain) {
      this.domainSelectModalShow = false
      this.dnText = domain
      this.domainBlur(false)
    },
    cancelDomainConfirmEvent() {
      this.domainSelectModalShow = false
    },
    showSelectDomain() {
      this.domainSelectModalShow = true
    },
    domainBlur(isFilter) {
      if (isFilter) {
        this.dnText = parseDomain(this.dnText, false)
        console.log(this.dnText)
      }
      if (this.dnText !== '' && this.dnText.length > 0) {
        let arr = this.dnText.split("\n")
        if (arr.length > this.maxDnNumber) {
          arr = arr.splice(0, 200)
          this.dnText = arr.join("\n")
        }
        this.curDnNumber = arr.length
      }
    },
    // 获取我的模板列表
    async getTemplateList() {
      let res = await getTemplateList({
        name: "",
        page: 1,
        limit: 1,
      });
      if (res.result) {
        if (res.data.list.length <= 0) {
          this.$Message.warning("请先添加模板");
          this.$router.replace("/user/template/add");
        }
      }
    },
    // 选择模板
    selectTemplateSubmit(id, name) {
      this.templateSelect = id;
      this.selectTemplateName = name;
    },
    // 选择模板
    selectTemplateSubmit2(id, name) {
      this.templateSelect2 = id;
      this.selectTemplateName2 = name;
    },
    // 确认
    async submit() {
      if(this.dnText === '' || this.dnText.length === 0) {
        return this.$Message.warning("请输入域名！");
      }
      if (!this.templateSelect) {
        this.$Message.warning("请选择模板");
        return;
      }
      let params = {
        domainNames: this.dnText.split("\n"),
        templateId: this.templateSelect,
        isLock: this.rule,
      };
      this.loading = true;
      let { data, result } = await templatePush(params);
      if (result) {
        if (data.length > 0) {
          this.resultList = data;
          this.resultModalShow = true;
        } else {
          this.dnText = "";
          this.dnNumber = 0;
          this.templateSelect = null;
          this.rule = 0;
          this.$Message.success("模板过户成功！");
          setTimeout(() => {
            this.$router.push("/user/template/transferlist");
          }, 1000);
        }
      }
      this.loading = false;
    },
  }
};
</script>

<style lang="scss" scoped>
.number-tips {
  position: absolute;
  bottom: 10px;
  right: 20px;
}
.long-name {
  min-width: 50px;
}
</style>
